<template>
<div style="background:#f8f9fd;margin-top:-10px;">
    <div class="aiRowOneContainer">
        <p style="font-weight:600;">AI智投</p>
        <p>
            <img src="../../assets/img/AI智投/0.png" alt="">
            <span>叠加广告主自有数据+美辰数据+媒体数据</span>
        </p>
        <p>
            <img src="../../assets/img/AI智投/0.png" alt="">
            <span>以性别、年龄、地域、兴趣等多维度定向目标人群</span>
        </p>
        <p>
            <img src="../../assets/img/AI智投/0.png" alt="">
            <span>提供专业创意策划与广告运营服务</span>
        </p>
        <button @click="toAISelect">立即体验</button>
        <p>品牌传播、产品促销、下载APP</p>
        <p>一站式媒体整合</p>
        <p>大号增粉、获取表单</p>
    </div>
    <mask-toast v-if="showMaskToast" @closeMask="closeMask"></mask-toast>
</div>
</template>
<script>
import maskToast from '../upgrade/upgradeToast'
export default {
   data(){
       return {
            debug: true,
            showMaskToast: false
       }
   },
   methods: {
        toAISelect(){
        if(this.debug){
            this.showMaskToast = true
            return
        }
        this.$router.push({path:'/AISelect'})
        },
        closeMask(data){
            this.showMaskToast = data
        }
    },
    components: {
        maskToast
    }
}
</script>
<style scoped>
.aiRowOneContainer{
    width:1200px;
    height: 574px;
    margin:0 auto;
    overflow: hidden;
    background: url("../../assets/img/AI智投/banner.png");
    background-position: center;
    position: relative;
    padding-left:10px;
}
.aiRowOneContainer>p:nth-child(1){
    font-size: 36px;
    color:rgb(34, 34, 34);
    margin-top: 145px;
}
.aiRowOneContainer>p>span{
    margin-left: 5px;
}
.aiRowOneContainer>p{
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.aiRowOneContainer>p:nth-child(2){
    margin-top: 30px;
}
.aiRowOneContainer>p:nth-child(3){
    margin-top: 30px;
}
.aiRowOneContainer>p:nth-child(4){
    margin-top: 30px;
}
.aiRowOneContainer>button{
    font-size: 16px;
    width:124px;
    height: 42px;
    color: rgb(255, 255,255);
    background: #EE4041;
    border-radius: 20px;
    margin-top: 80px;
     -moz-box-shadow: 0px 4px 19px #ed9191;
  -webkit-box-shadow: 0px 4px 19px #ed9191;
  box-shadow: 0px 4px 19px #ed9191;
  font-weight: 600;
}
.aiRowOneContainer>p:nth-child(6){
    position: absolute;
    top:187px;
    left: 470px;
}
.aiRowOneContainer>p:nth-child(7){
    font-size: 18px;
    color:rgb(237, 64, 64);
    position: absolute;
    top:157px;
    right: 305px;
    font-weight: 600;
}
.aiRowOneContainer>p:nth-child(8){
    position: absolute;
    top:194px;
    right: 40px;
}
</style>


